<style rel="stylesheet/scss" lang="scss" scoped>
  .delete {
    height: 3.5rem;
    box-sizing: border-box;
  }
  .slider {
    position: relative;
    width: 100%;
    height: 3.5rem;
    box-sizing: border-box;
    user-select: none;
    border-bottom: 1px solid #eee;
    .content {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #fff;
      z-index: 1;
      transition: 0.3s;
      p {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        height: 3.5rem;
        line-height: 3.5rem;
        span {
          flex: 1;
          text-align: right;
          margin-right: .5rem;
        }
        span:first-child {
          flex: 0 0 25%;
          text-align: left;
        }
        span:last-child {
          text-align: right;
        }
        i {
          float: right;
          margin-right: .1rem;
          flex: 0 0 .5rem;
          font-size: .9rem;
        }
      }
    }
    .remove {
      position: absolute;
      width: 3.5rem;
      height: 3.36rem;
      box-sizing: border-box;
      background-color: #ef8b81;
      right: 1px;
      bottom: 1px;
      color:#fff;
      text-align: center;
      font-size: .6rem;
      & i {
        font-size: 1.3rem;
        color: #fff;
      }
      & .delete-box {
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, -50%);
        p {
          padding-bottom: .2rem;
        }
      }
    }
  }
  .slider:last-child {
    border: none;
  }
</style>

<template>
  <div>
    <div class="delete" v-for="(item, index) in list">
      <div class="slider">
        <div class="content"
             @touchstart='touchStart(index,$event)'
             @touchmove='touchMove(index,$event)'
             @touchend='touchEnd(index,$event)'
             @click="changeCard(index, item, $event)"
             :style="item.deleteSlider"
        ><p><span>{{typeTxt(item.idType)}}</span><span>{{item.idNumber}}</span><i class="iconfont icon-more"></i></p></div>
        <div class="remove" ref='remove'
             @click="deleteIndex(index,item)">
            <div class="delete-box">
              <p><i class="iconfont icon-delete"></i></p>
              <span>删除</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  const CARD_INFO_LIST =  [
    {
      "itemCode": "IDENTITY",
      "itemTxt": "身份证"
    },
    {
      "itemCode": "PASSPORT",
      "itemTxt": "护照"
    },
    {
      "itemCode": "SERVICE_PASSPORT",
      "itemTxt": "因公护照"
    },
    {
      "itemCode": "GANGAO",
      "itemTxt": "港澳通行证"
    },
    {
      "itemCode": "TAIWAN",
      "itemTxt": "台湾通行证"
    },
    {
      "itemCode": "JUNDUI",
      "itemTxt": "军队证件"
    },
    {
      "itemCode": "HAIYUAN",
      "itemTxt": "海员证"
    },
    {
      "itemCode": "TAIBAO",
      "itemTxt": "台胞证"
    },
    {
      "itemCode": "HUIXIANG",
      "itemTxt": "回乡证"
    }
  ]; //所有证件类型
  export default {
    name: 'left-slide-delete',
    props: ['list'],
    data() {
      return {
        startX: 0,
        // 触摸位置
        endX: 0,
        //结束位置
        moveX: 0,
        //滑动时的位置
        disX: 0,
        //移动距离
        deleteSlider: '1'
        //滑动时的效果,使用v-bind:style="deleteSlider"
      };
    },
    methods: {
      changeCard(index, item, e) {
        this.$emit('changeCard',index, item, e)
      },
      typeTxt: function (type) {
        var txt = null;
        var that = this;
        $.each(CARD_INFO_LIST, function (i, cre) {
          if (cre.itemCode === type) {
            txt = cre.itemTxt;
            return false;
          }
        });
        return txt;
      },
      deleteIndex(index, item, e) {
        this.$emit("deleteLine", index, item, e);
      },
      touchStart(index,ev) {
        $.each(this.list,function (i,it) {
          it.deleteSlider = 'transform:translateX(0px)';
        });
        ev = ev || event;
        if (ev.touches.length === 1) {
          // 记录开始位置
          this.list[index].startX = ev.touches[0].clientX;
        }
      },
      touchMove(index,ev) {
        ev = ev || event;
        let wd = this.$refs.remove[index].offsetWidth;
        var item = this.list[index];
        if (ev.touches.length === 1) {
          // 滑动时距离浏览器左侧实时距离
          item.moveX = ev.touches[0].clientX;
          item.disX = item.startX - item.moveX;
          // 如果是向右滑动或者不滑动，不改变滑块的位置
          if (item.disX < 0 || item.disX === 0) {
            item.deleteSlider = 'transform:translateX(0px)';
          } else if (item.disX > 0) {
            item.deleteSlider = 'transform:translateX(-' + item.disX * 5 + 'px)';
            if (item.disX * 5 >= wd) {
              item.deleteSlider = 'transform:translateX(-' + wd/20 + 'rem)';
            }
          }
        }
      },
      touchEnd(index,ev) {
        ev = ev || event;
        let wd = this.$refs.remove[index].offsetWidth;
        var item = this.list[index];
        if (ev.changedTouches.length === 1) {
          let endX = ev.changedTouches[0].clientX;
          item.disX = item.startX - endX;
          // 如果距离小于删除按钮一半,强行回到起点
          if ((item.disX * 5) < (wd / 2)) {
            item.deleteSlider = 'transform:translateX(0px)';
          } else {
            // 大于一半 滑动到最大值
            item.deleteSlider = 'transform:translateX(-' + wd/20 + 'rem)';
          }
        }
      }
    },
    computed:{

    }
  }
</script>


